<template>
    <div class="infoContain">
        <h4 class="title">{{imageInfo.title}}</h4>
        <p class="subtitle">
            <span>发表时间:{{imageInfo.add_time|DateFormat}}</span>
            <span>点击：{{imageInfo.click}}次</span>
        </p>
        <hr>
        <div class="imageInfoContent" v-html="imageInfo.content"></div>

        <vue-preview :slides="list"></vue-preview>

        <cmt-box :getcommetId="id"></cmt-box>
    </div>
</template>

<script>
    import comment from '../publicComponents/comment.vue'

    export default {
        data: function () {
            return {
                id: this.$route.params.id,
                imageInfo: {},
                list: []
            }
        },
        methods: {
            getImageInfor() {
                this.$http.get('http://www.liulongbin.top:3005/api/getimageInfo/' + this.id).then(data => {
                    this.imageInfo = data.body.message[0];
                })
            },
            getImageList() {
                this.$http.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.id).then(data => {
                    this.list = data.body.message.map(item => {
                        return {
                            src: item.src,
                            msrc: item.src,
                            w: 300,
                            h: 300
                        };
                    })
                })
            }
        },
        created() {
            this.getImageInfor();
            this.getImageList();
        },
        components: {
            "cmt-box": comment
        }
    }
</script>

<style scoped lang="less">
    .infoContain {
        padding: 8px;

        .title {
            text-align: center;
            font-size: 16px;
            margin: 10px auto;
            color: dodgerblue;
        }

        .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }

        .imageInfoContent {
            font-size: 13px;
            line-height: 30px;
        }
    }
</style>
